<template>
    <div class="container scopClass">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 选项1开始 -->
            <el-tab-pane label="追溯查询" name="追溯查询">
                <h3 style="margin: 20px 0">追溯查询</h3>
                <el-form ref="form" :model="form1" label-width="100px" label-position="left">
                    <el-form-item label="查询方式" :rules="{required: true, message: '不能为空'}">
                        <el-radio v-model="form1.method" label="1">产品批号查询</el-radio>
                        <el-radio v-model="form1.method" label="2">追溯码查询</el-radio>
                    </el-form-item>
                    <div v-show="form1.method != 2">
                      <el-form-item label="追溯类型"  @click.native="showTable1" :rules="{required: true, message: '不能为空'}">
                          <el-input style="width:220px" placeholder="请选择"></el-input>
                      </el-form-item>
                      <el-form-item label="品名"  @click.native="showTable1" :rules="{required: true, message: '不能为空'}">
                          <el-input style="width:220px" placeholder="请选择"></el-input>
                      </el-form-item>
                      <el-form-item label="批号"  @click.native="showTable1" :rules="{required: true, message: '不能为空'}">
                          <el-input style="width:220px" placeholder="请选择"></el-input>
                      </el-form-item>
                    </div>
                    <el-form-item v-show="form1.method == 2" label="追溯码" :rules="{required: true, message: '不能为空'}">
                        <el-input v-model="form1.zsId" placeholder="请扫描/输入追溯码" style="width:220px"></el-input>
                    </el-form-item>
                </el-form>


                <!-- 弹出选择 -->
                <el-dialog title="请选择" :visible.sync="dialogTableVisible">
                    <el-row>
                        <el-col :span="11">
                            <el-form>
                                <el-form-item label="追溯类型">
                                    <el-select v-model="queryForm1.type">
                                        <el-option :label="item" :value="item" v-for="(item, index) in queryForm1.types" :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="11">
                            <el-form>
                                <el-form-item label="品名">
                                    <el-select v-model="queryForm1.name">
                                        <el-option :label="item" :value="item" v-for="(item, index) in queryForm1.names" :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="2"><el-button @click="getTable1" type="primary">查询</el-button></el-col>
                    </el-row>
                    <el-table
                        :data="tableData1"
                        border
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                    >
                        <el-table-column prop="type" sortable label="追溯类型"></el-table-column>
                        <el-table-column prop="name" sortable label="品名"></el-table-column>
                        <el-table-column prop="id" sortable label="批号"></el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"    
                                    @click="handleSelect(scope.$index, scope.row)"
                                >选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination 
                        layout="total, prev, pager, next, jumper" 
                        :page-size="pagesize1" 
                        :current-page.sync="queryForm1.page" 
                        :total="total1"  
                        @current-change="handleCurrentChange1" 
                        style="margin-top:20px"
                    ></el-pagination>
                </el-dialog>

            <!-- 选项1结束 -->
            </el-tab-pane>
            <!-- 选项2开始 -->
            <el-tab-pane label="GAP记录打印" name="GAP记录打印">
                <el-row style="margin:20px 0;">
                    <h3>GAP记录打印</h3>
                </el-row>
            <!-- 选项2结束 -->
            </el-tab-pane>
            <!-- 选项3开始 -->
            <el-tab-pane label="产品召回" name="产品召回">
                <div v-show="recall">
                    <el-row type="flex" justify="space-between" style="margin:20px 0;">
                        <h3>产品召回</h3>
                        <el-button type="primary" v-if="added" @click="addrecall" >新增召回</el-button>
                    </el-row>
                    <el-table
                        :data="tableData1"
                        border
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                    >
                        <el-table-column prop="breedName" sortable label="产品名称"></el-table-column>
                        <el-table-column prop="materialType" sortable label="召回仓库"></el-table-column>
                        <el-table-column prop="materialCode" sortable label="批号"></el-table-column>
                        <el-table-column prop="type" sortable label="操作人"></el-table-column>
                    
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="handleDelete(scope.$index, scope.row)"
                                >查看</el-button>
                                
                                <el-button
                                    type="text"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize3" @current-change="handleCurrentChange3" :total="total3" :current-page.sync="currentPage3" style="margin-top:20px"></el-pagination>
                </div>
                <div  v-show="!recall">
                    <el-form :model="form3">
                        <el-row>
                            <el-row type="flex" justify="space-between" style="margin:20px 0;">
                                <h3>产品召回</h3>
                            </el-row> 
                            <el-col :span="12">
                                <el-form-item label="名称：" @click.native="select">
                                    <el-input placeholder="请输入内容" v-model="ruleForm.plantBaseName"  style="width:300px"></el-input>
                                </el-form-item>
                                <el-form-item label="批号：" @click.native="select">
                                    <el-input placeholder="请输入内容" v-model="ruleForm.plantBatch"  style="width:300px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="召回范围：" @click.native="select">
                                    <el-select style="width:300px" v-model="queryForm1.type">
                                        <el-option :label="item" :value="item" v-for="(item, index) in queryForm1.types" :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="召回时间：" @click.native="select">
                                    <el-select style="width:300px" v-model="queryForm1.type">
                                        <el-option :label="item" :value="item" v-for="(item, index) in queryForm1.types" :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col>
                            <div style="margin-bottom:20px;">召回原因及公告</div>
                            <el-form-item>
                                <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <div>
                            <h3 style="margin-bottom:20px;">产品流向</h3>
                            <el-table
                                :data="tableData1"
                                border
                                ref="multipleTable"
                                header-cell-class-name="table-header"
                            >
                                <el-table-column prop="breedName" sortable label="名称"></el-table-column>
                                <el-table-column prop="materialType" sortable label="规格"></el-table-column>
                                <el-table-column prop="materialCode" sortable label="数量"></el-table-column>
                                <el-table-column prop="type" sortable label="客户名称"></el-table-column>
                            </el-table>
                            
                        </div>
                    </el-form>
                </div>
            </el-tab-pane>
        </el-tabs>
        
        <el-form>
            <el-form-item style="padding-left:120px;" class="footerFixed">
                <el-button @click="handleRecall" v-show="recallFixed" type="primary">召回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import  {base_findByList,base_delete} from "@/request/api"
    export default {
        data() {
            return {
                activeName: '追溯查询',
                // tab - 1
                dialogTableVisible:false,
                form1:{
                    method:'1',
                    type:'',
                    name:'',
                    id:'',
                    zsId:''
                },
                queryForm1:{
                    page:1,
                    type:'种植',
                    types:["种植","采收","初加工","采购入库"],
                    name:'大黄',
                    names:["大黄","天麻"],
                },
                tableData1: [],
  
                // tab - 2

                // tab - 3
                ruleForm:{},
                recall:true,
                recallFixed:false,
                form3:{

                },

                searchName1: '',
                searchName2: '',
                searchName3: '',
                total1: 0,
                pagesize1:1,
                total2: 0,
                currentPage2:1,
                pagesize2:10,
                total3: 0,
                currentPage3:1,
                pagesize3:10,
              
                listUrl: '',
                action: '',
                added:true,
            };
        },
        created(){
         
        },
        mounted(){
           this.init1()
        },
        destroyed: function () {
           
        },
        methods: {
            // tabs
            handleClick(tab, event) {
                // this.materialType = tab.label
                // if (this.materialType == '中药材') {
                //     this.init1()
                // } else if(this.materialType == '辅料') {
                //     this.init2()
                // } else if(this.materialType == '中药饮片'){
                //     this.init3()
                // } else if(this.materialType == '配方颗粒'){
                //     this.init4()
                // }
                this.recallFixed = false
                this.recall = true
            },
            // tab - 1
            showTable1(){
                this.dialogTableVisible = true
            },
            handleSelect(index,row){
                this.$router.push({
                    path:'/review/check',
                    query:{
                        id:row.id,
                        type:row.type
                    }
                })
            },
            getTable1(){
                let query = {
                    page:this.queryForm1.page,
                    type:this.queryForm1.type,
                    name:this.queryForm1.name
                }
            
                // 调接口获取表格数据
                let tableData = [
                    {type:'种植',name:'大黄',id:'0001'},
                    {type:'采收',name:'大黄',id:'0002'},
                    {type:'采购入库',name:'大黄',id:'0003'},
                ]
                this.tableData1 = tableData
                // 共多少条
                this.total1 = tableData.length
            },
            handleCurrentChange1(val){
               this.queryForm1.page = val
               this.init1()
            },
            init1(){
                this.getTable1()


                // let data = {
                //     page:this.currentPage1,
                //     type:'2'
                // }
                // base_findByList(data).then((res)=>{
                //     this.tableData = res.rows
                //     this.total1 = res.total
                //     var _this = this
                //     for (let i = 0; i < this.tableData.length; i++) {
                //         if(this.tableData[i].state == 0){
                //             _this.tableData[i].stateful = "休耕" 
                //         }else{
                //             _this.tableData[i].stateful = "种植中"
                //         }
                        
                //     }
                //     console.log(this.tableData)
                // })
            },

            // tab - 2



            // tab - 3
            addrecall(){
                this.recall = false
                this.recallFixed = true
            },
        







            handleYard(){
                this.dialogTableVisible = true
            },
           
            
            // 
            handleEdit(index,row){
                // this.$router.push({
                //     path:'/materialsManagement/added',
                //     query:{
                //         id: row.id
                //     }
                // })
            },
            // 查看
            handleView(index,row){
                
            },
            // 删除
            handleDelete(index,row){
                base_delete(row.id).then((res)=>{
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        type: 'success'
                    });
                })
            },
           
            // 列表搜索
            handleSearch1() {
                this.currentPage1 = 1
                this.init1()
            },
            handleSearch2() {
                this.currentPage2 = 1
                this.init2()
            },
            handleSearch3() {
                this.currentPage3 = 1
                this.init3()
            },
            handleRecall(){
				
			},
            // 分页事件
            // handleCurrentChange1(val){
            //     this.currentPage1 = val
            //     this.init1()
            //     console.log(val);
            // },
            handleCurrentChange2(val){
                this.currentPage2 = val
                this.init2()
            },
            handleCurrentChange3(val){
                this.currentPage3 = val
                this.init3()
            },
          
            uploadonchange(file) {
                
               
            },
            //判定操作按钮显示
            judgmentAuthority(){
                var type = JSON.parse(localStorage.getItem("userInfo")).appMenus
                type.map(item => {
                    if(item.appName == '种植平台'){
                        item.menus.map(item1 => {
                            if(item1.name == '追溯查询' && item1.children != null){
                                for(var i = 0; i < item1.children.length; i++){
                                    if(item1.children[i].name == '新增') this.added = false;
                                    if(item1.children[i].name == '查看') this.edit = false;
                                    if(item1.children[i].name == '查看') this.edit = false;
                                    if(item1.children[i].name == '查看') this.edit = false;
                                    if(item1.children[i].name == '查看') this.edit = false;
                                }
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
// 深度作用器
/deep/.upload-daoru{
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
.el-col{
    margin-bottom: 0;
}

 .el-pagination{
    text-align: center;
}


</style>